<template>
    <div class="addneworder">
        <div class="addgoods">
            <el-row>
                <el-col :span="5">
                    <div class="grid-content bg-purple-dark">
                        <el-select v-model="selectValue" placeholder="请选择">
                            <el-option
                                    v-for="item in selectoptions"
                                    :key="item.goodsName"
                                    :label="item.goodsName"
                                    :value="item.goodsName"
                            >
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="19">
                    <div class="grid-content bg-purple-dark">
                        <el-button type="primary" style="background-color: #099FB8" @click="addgoods">新增</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="ordertable">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-table
                                :cell-style="rowClass"
                                :header-cell-style="headClass"
                                border
                                :data="tableData"
                                style="width: 100%">
                            <el-table-column
                                    label="商品"
                                    width="300">
                                <template slot-scope="scope">
                                    {{scope.row.goodsName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="数量"
                                    width="170">
                                <template slot-scope="scope">
                                    <el-input v-model=scope.row.num  @input="changeinputnum($event)"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="单位"
                                    width="170">
                                <template slot-scope="scope">
                                    {{scope.row.goodsUnit.goodsUnitName}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="单价"
                                    width="170">
                                <template slot-scope="scope">
                                    ￥{{scope.row.goodsOrderPrice}}元
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="小计"
                                    width="170">
                                <template slot-scope="scope">
                                    <!--单价*数量-->
                                    ￥{{scope.row.num*scope.row.goodsOrderPrice}}元
                                </template>
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                            >
                                <template slot-scope="scope">
                                    <el-button
                                            class="del"
                                            size="mini"
                                            type="danger"
                                            @click="handledel(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="allprice">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark" style="text-align:right">
                       <div>
                           合计：￥
                           {{allprice}}
<!--                           <el-input v-model="allprice"></el-input>-->
                       </div>
                       <div>应付总额：￥<span style="color: red">{{allprice}}</span></div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="dataorder">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <span>交货日期：</span>
                        <el-date-picker
                                v-model="timevalue"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期"
                                @change="getTime"
                        >
                        </el-date-picker>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="shouhuoinfo">
            <el-row>
                <el-col :span="3">
                    <div class="grid-content bg-purple-dark">
                        <span>收货信息：</span>
                        <i class="el-icon-edit-outline" @click="editaddress"></i>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content bg-purple-dark">
                       <span>客户名称：</span>
                        <el-input :disabled="addressvisible" v-model="khaddress.clientName" style="width: 50%"></el-input>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div class="grid-content bg-purple-dark">
                       <span>收货人：
                            <el-input :disabled="addressvisible" v-model="khaddress.receivingName" style="width: 50%"></el-input>
                        </span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-dark">
                       <span>联系电话：
                            <el-input :disabled="addressvisible" v-model="khaddress.receivingTel" style="width: 60%"></el-input>
                        </span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-content bg-purple-dark">
                        <span>
                            <span>收货地址：</span>
                            <el-input  :disabled="addressvisible" v-model="khaddress.receivingAddress" style="width: 50%"></el-input>
                        </span>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div class="btn">
            <el-row>
                <el-col :span="24">
                    <div class="grid-content bg-purple-dark">
                        <el-button type="primary" style="background-color: #099FB8" @click="saveaddorder">保存</el-button>
                        <el-button type="primary" style="background-color: white;color: black" @click="quxiao">取消</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {mapActions,mapGetters} from 'vuex'
    export default {
        name: "AddNewOrder",
        data(){
            return{
                addressvisible:true,
                dialogVisible: false,
                allprice:0,
                num:1,
                inputnumValue:'',
                selectoptions: [],
                selectValue: '',
                tableData:[],
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                timevalue: '',
                khaddress:{
                    clientName: "",           //客户名称
                    receivingAddress: "",      //收货地址
                    receivingInfoId: "",       //收货信息id
                    receivingName: "",       //收货人
                    receivingTel: 0     //手机
                },
            }
        },
        computed:{

        },
        methods:{
            ...mapGetters(['getkhaddress','getgoodata']),
            ...mapActions(['getKHaddress','changekHaddress','getGoodsData','addOrder']),
            // 表头样式设置
            headClass () {
                return 'text-align: center;background:#F5F6F7;'
            },
            // 表格样式设置
            rowClass () {
                return 'text-align: center;'
            },
            addgoods(){
                /*添加商品
                * 获取下拉框的值
                * 遍历 商品数据selectoptions
                * 判断值是否相同
                * */
                let value=this.selectValue
                console.log(this.selectoptions)
                for(let i=0;i<this.selectoptions.length;i++){
                    /*判断不能添加同一个商品，重复添加报错提示：商品重复添加*/
                    // for(let j=0;j<=this.tableData.length;j++){
                    //     if(this.selectoptions[i].value===value&&this.tableData[j]!==this.selectoptions[i]){
                    //         this.tableData.push(this.selectoptions[i])
                    //     }
                    // }
                    if(this.selectoptions[i].goodsName===value){
                        this.tableData.push(this.selectoptions[i])
                    }
                }
                console.log(this.tableData)
                this.allprice=this.addallprcie()
            },
            handledel(index,row){
                console.log(index)
                console.log(row)
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].goodsName===row.goodsName){
                        this.tableData.splice(i,1)
                    }
                }
                this.allprice=this.addallprcie()
            },
            addallprcie(){
                let sum=0
                let arr=[]
                for(let i=0;i<this.tableData.length;i++){
                    /*这里的价格是Number类型*/
                    let all=this.tableData[i].num*this.tableData[i].goodsOrderPrice
                    arr.push(all)
                }
                for(let i=0;i<arr.length;i++){
                    sum+=arr[i]
                }
                return sum
            },
            changeinputnum(e){
                let sum=0
                let arr=[]
                //获取数量和计算，重新计算allprice
                // console.log(row.num*row.price)
                for(let i=0;i<this.tableData.length;i++){
                    let all=this.tableData[i].num*this.tableData[i].goodsOrderPrice
                    arr.push(all)
                }
                for(let i=0;i<arr.length;i++){
                    sum+=arr[i]
                }
                console.log(sum)
                this.$forceUpdate()
               this.allprice=sum
            },
            editaddress(){
                this.addressvisible = false
            },
            getTime(val){
                this.timevalue=val
            },
            /*客户id获取-------------*/
            saveaddorder(){
                /*保存页面信息 发送给后台 跳转到订货单页面*/
                let newdata=this.tableData
                newdata.map((item,i)=>{
                    item.notes='备注'
                    delete item['availableStockNumber']
                    delete item['goodsImg']
                    delete item['goodsMarketPrice']
                    delete item['goodsName']
                    delete item['goodsOrderPrice']
                    delete item['goodsUnit']
                    delete item['inventoryCost']
                    delete item['purchaseCost']
                    delete item['referenceCostPrice']
                    return item
                })
                console.log(newdata)
                console.log(this.timevalue)/*商品id,数量，备注*/
                /*设计两个请求 一个是新增订单，一个是地址修改*/
                /*这是保存的地址数据*/
                let obj1={
                    clientId: sessionStorage.getItem('clientId'),    //客户id，通过登录获取
                    clientName: this.khaddress.clientName,           //客户名称
                    receivingAddress: this.khaddress.receivingAddress,      //收货地址
                    receivingInfoId: "c1328e1658a44b9e9e815dbde8c67703",       //收货信息id
                    receivingName: this.khaddress.receivingName,       //收货人
                    receivingTel:this.khaddress.receivingTel    //手机
                }
                /*这是商品数据+时间+制单人+金额+收货id+客户id*/
                let obj2={
                    clientId:sessionStorage.getItem('clientId'),    //客户id，通过登录获取
                    creator: "娜姐",                //制单人
                    deliveryDate: this.timevalue,     //交货日期
                    orderDetailsList:newdata,
                    orderMainPrice: this.allprice,         //订单金额
                    receivingInfoId: "c1328e1658a44b9e9e815dbde8c67702"  //收货信息id
                }
                this.changekHaddress(obj1).then(res=>{
                    if(res===200){
                        /*这里进行新增订单操作*/
                        this.addOrder(obj2).then(res=>{
                            if(res===200){
                                this.$message.success('保存成功')
                                this.$router.push('/Main/Order/PurchaseOrder')
                            }
                        })
                    }else {
                        this.$message.error('保存失败')
                    }
                })
            },
            quxiao(){
                this.$message.warning('取消保存')
                this.$router.push('/Main/Order/PurchaseOrder')
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        },
        created() {
            /*查询客户地址*/
            let obj={
                clientId: sessionStorage.getItem('clientId'),     //客户id---通过登录的时候获取获取
                orderMainId:"c1328e1658a44b9e9e815dbde8c67702"  //订单号
            }
            this.getKHaddress(obj).then(res=>{
                this.khaddress=this.getkhaddress()
                this.getGoodsData().then(res=>{
                    this.selectoptions=this.getgoodata()
                })
            })
        }
    }
</script>

<style scoped lang="less">
.ordertable,.addgoods,.allprice,.dataorder,.shouhuoinfo,.btn{
    margin-top: 20px;
}

</style>